<div class="live-preview-settings modal" style="min-height: 400px;display: flex; flex-direction: column; justify-content: space-between">
    <div>
        <div class="modal-header">
            <h1 class="dialog-title">{{Strings.LIVE_DEV_SETTINGS_TITLE}}</h1>
        </div>
        <div class="modal-body">
            <div class="form-group form-check">
                <input type="checkbox" class="form-check-input" id="showLivePreviewAtStartupChk" style="margin-top: -2px;">
                <label class="form-check-label" for="showLivePreviewAtStartupChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_STARTUP}}</label>
            </div>
            <div class="form-group" style="margin-top: 9px;">
                <input id="enableCustomServerChk" type="checkbox" class="form-check-input" style="margin-top: -1px;">
                <label id="enableCustomServerLabel" class="form-check-label" for="enableCustomServerChk" style="display: inline">{{Strings.LIVE_DEV_SETTINGS_USE_SERVER}}</label>
                <input id="livePreviewServerURL" type="text" spellcheck="false" autocomplete="off" class=""
                       style="width: 93%; margin-left: 20px;margin-top: 5px;margin-bottom: 0;" value="{{settings.fontSize}}" placeholder="{{Strings.LIVE_DEV_SETTINGS_SERVER_INBUILT}}">
                <label id="serveRootLabel" class="forced-hidden" style="margin-left: 20px;margin-top: 9px;">{{Strings.LIVE_DEV_SETTINGS_SERVER_ROOT}}</label>
                <input id="serveRoot" type="text" spellcheck="false" autocomplete="off" class="forced-hidden" style="width: 93%; margin-left: 20px;"
                       value="{{settings.fontSize}}" placeholder="{{Strings.LIVE_DEV_SETTINGS_SERVER_ROOT_HELP}}">
                <label id="frameworkLabel" class="forced-hidden" style="margin-left: 20px;">{{Strings.LIVE_DEV_SETTINGS_FRAMEWORK}}</label>
                <select id="frameworkSelect" class="forced-hidden" style="width: 20%; margin-left: 20px;">
                    <option style="text-align:left;" value="Custom">{{Strings.LIVE_DEV_SETTINGS_FRAMEWORK_CUSTOM}}</option>
                    <option style="text-align:left;" value="Docusaurus">Docusaurus</option>
                </select>

                <input id="hotReloadChk" type="checkbox" class="form-check-input forced-hidden" style="margin-top: -2px; margin-left: 20px;">
                <label id="hotReloadLabel" class="form-check-label forced-hidden" for="hotReloadChk" style="display: inline" title="{{Strings.LIVE_DEV_SETTINGS_RELOAD_HELP}}">{{Strings.LIVE_DEV_SETTINGS_RELOAD}}</label>
            </div>
        </div>
    </div>
    <div class="modal-footer" style="">
        <button class="dialog-button btn" data-button-id="cancel">{{Strings.CANCEL}}</button>
        <button class="dialog-button btn primary" id="theme-settings-done-btn" data-button-id="ok">{{Strings.DONE}}</button>
    </div>
</div>
